<template>
  <div class="user_right fl ml20" v-loading="islogina">
    <div class="sales_top">
      <div>
        <el-input class="ipt130" v-model="brand" placeholder="查询品牌"></el-input>
        <el-input class="ipt130" v-model="model" placeholder="查询型号"></el-input>
      </div>
      <div>
        <span>店铺:</span>
        <el-select class="select94" v-model="storeId" placeholder="请选择" @change="pickStore">
          <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </div>
      <div>
        <span>货物所在地:</span>
        <el-select
          class="select94"
          v-model="province"
          @change="select_province"
          placeholder="请选择"
          style="margin-right: 8px"
        >
          <el-option
            v-for="item in ProvinceList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          ></el-option>
        </el-select>
        <el-select class="select94" v-model="city" placeholder="请选择">
          <el-option
            v-for="item in regionList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          ></el-option>
        </el-select>
      </div>
      <div>
        <button class="btn_query bor3">查询</button>
      </div>
    </div>
    <div class="sales_menu">
      <button>批量修改</button>
      <button @click="batch_delete">批量删除</button>
      <button @click="tableToExcel">导出</button>
    </div>
    <div class="sales_conten">
      <colgroup>
        <col width="113" />
        <col width="134" />
        <col width="74" />
        <col width="107" />
        <col width="99" />
        <col width="88" />
        <col width="170" />
        <col width="115" />
      </colgroup>
      <tbody>
        <tr class="tbody_top">
          <th class="cbox_left">
            <p>
              <input
                type="checkbox"
                name="vehicle"
                value="Bike"
                ref="check_all"
                @click="switchItem()"
              />品牌
            </p>
          </th>
          <th>型号</th>
          <th>数量</th>
          <th>单价</th>
          <th>货物所在地</th>
          <th>备注</th>
          <th>更新时间</th>
          <th>操作</th>
        </tr>
      </tbody>
      <tbody v-for="(item,index) in List" :key="index"  style="table-layout:fixed;">
        <tr class="tr_content">
          <td class="cbox_left tds">
            <p>
              <input
                type="checkbox"
                class="check-item"
                name="vehicle"
                :value="index"
                :checked="item.ischeck"
                @click="isSelect(index)"
              />
              {{item.brand_name}}
            </p>
          </td>
          <td >{{item.model_name}}</td>
          <td >{{item.stock}}</td>
          <td >¥{{item.discount_price}}</td>
          <td  v-if="item.warehouse_address">{{item.warehouse_address.name}}</td>
          <td  v-else></td>
          <td style="word-break: break-all;word-wrap: break-word;">{{item.remarks || '无'}}</td>
          <td >{{item.updated_at}}</td>
          <td >
            <el-link type="primary" @click="modify(item.id,item)">修改</el-link>
            <el-link
              type="danger"
              style="margin-left: 10px;user-select: none;"
              @click="btnIsshelves(index,item.id,item.on_sale)"
            >{{item.on_sale?'下架':'上架'}}</el-link>
          </td>
        </tr>
        <tr>
          <td  colspan="8">
            <div class="underline"></div>
          </td>
        </tr>
      </tbody>
    </div>
    <div class="laypage">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="metaData.current_page"
        :page-count="metaData.last_page"
        @prev-click="prev"
        @next-click="uanext"
        @current-change="btn_current"
      ></el-pagination>
    </div>
    <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
      <div class="modify_popup">
        <div>
          <span>数量:</span>
          <el-input class="text50" v-model="modify_num" placeholder="请输入数量"></el-input>
        </div>
        <div>
          <span>单价:</span>
          <el-input class="text50" v-model="modify_price" placeholder="请输入单价"></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="determineBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  shopGoodsList,
  shelves,
  unshelve,
  isshopGoods,
  goodsEditor,
  ovistoreList,
} from "@/api/business";
import { getProvinceList } from "@/api/user";
export default {
  data() {
    return {
      brand: "",
      model: "",
      options: [],
      value: "",
      city: "",
      province: "",
      isshelves: false,
      checkedCities: [],
      istns: true,
      centerDialogVisible: false,
      modify_num: "",
      modify_price: "",
      List: [],
      pageIndex: 1,
      metaData: [],
      islogina: false,
      ProvinceList: [],
      regionList: [],
      storeId: '',
      xgId: "",
      xgData: {
        stock: "",
        discount_price: "",
        price: "66",
      },
    };
  },
  watch: {
    storeId: {
      handler(val) {
        this.getShopGoodsList();
      },
    },
    pageIndex: {
      handler(val) {
        this.getShopGoodsList();
      },
    },
  },

  created() {
    this.getprovince();
    this.getstoreList();
  },

  methods: {
    switchItem() {
      let isallc = this.$refs.check_all.checked;
      this.List.forEach((item) => {
        if (isallc) {
          item.ischeck = true;
        } else {
          item.ischeck = false;
        }
      });
    },

    // 获取选中
    isSelect(index) {
      this.List[index].ischeck = !this.List[index].ischeck;
    },

    // 批量删除
    batch_delete() {
      let checkList = this.List.filter((item) => item.ischeck === false);
      let ischeck = this.List.filter((item) => item.ischeck === true);
      if (ischeck.length === 0) {
        this.$message({
          message: "请先选择商品",
          type: "warning",
        });
      } else {
        this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.List = checkList;
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    btn_delete(index) {
      this.$confirm("此操作将永久删除该此条信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.List.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    tableToExcel() {
      let excelList = this.List.filter((item) => item.ischeck === true);
      if (excelList.length === 0) {
        this.$message("请先选择要导出的商品");
        return;
      }
      //列标题
      let head = `<tr><td>品牌</td><td>型号</td><td>数量</td><td>单价</td><td>货物所在地</td><td>备注</td><td>更新时间</td></tr>`;
      let tbody = ""; //内容
      for (let item in excelList) {
        tbody += `<tr>
                        <td>${excelList[item].brand_name + "\t"}</td>
                        <td>${excelList[item].model_name + "\t"}</td>
                        <td>${excelList[item].stock + "\t"}</td>
                        <td>${excelList[item].discount_price + "\t"}</td>
                        <td>${excelList[item].goods + "\t"}</td>
                        <td>${excelList[item].remarks + "\t"}</td>
                        <td>${excelList[item].updated_at + "\t"}</td>
                    </tr>`;
      }
      let str = head + tbody; //头部跟身体内容连接
      //Worksheet名
      let worksheet = "Sheet1";
      let uri = "data:application/vnd.ms-excel;base64,";

      //下载的表格模板数据
      let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" 
                  xmlns:x="urn:schemas-microsoft-com:office:excel" 
                  xmlns="http://www.w3.org/TR/REC-html40">
                  <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
                    <x:Name>${worksheet}</x:Name>
                    <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
                    </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
                    </head><body><table>${str}</table></body></html>`;
      //下载模板
      window.location.href = uri + this.base64(template);
    },
    //输出base64编码
    base64(s) {
      return window.btoa(unescape(encodeURIComponent(s)));
    },
    // 修改
    modify(id, item) {
      this.centerDialogVisible = true;
      this.xgId = id;
      this.modify_num = item.stock;
      this.modify_price = item.discount_price;
      this.xgData.price = item.price;
    },
    async determineBtn() {
      this.xgData.stock = this.modify_num;
      this.xgData.discount_price = this.modify_price;
      await goodsEditor(this.xgId, this.xgData).then(
        (e) => (this.centerDialogVisible = false),
        this.$message({ message: "修改成功", type: "success" })
      );
    },
    // 获取正在销售的商品列表
    async getShopGoodsList() {
      this.islogina = true;
      let page = this.pageIndex;
      this.storeId = this.storeId || this.options[0].id
      const res = await isshopGoods(page, this.storeId);
      res.data.forEach((item) => {
        item.ischeck = false;
      });
      this.islogina = false;
      this.List = res.data;
      this.metaData = res.meta;
    },

    // 获取省份地区
    async getprovince() {
      let res = await getProvinceList();
      this.ProvinceList = res;
    },

    // 选择省份
    select_province(e) {
      for (const key in this.ProvinceList) {
        if (this.ProvinceList[key].code === e) {
          this.regionList = this.ProvinceList[key].children;
          this.city = this.ProvinceList[key].children[0].code;
        }
      }
    },

    // 获取店铺
    async getstoreList() {
      const res = await ovistoreList();
      this.options = res;
      this.getShopGoodsList();
    },

    // 上一页
    prev() {
      this.pageIndex--;
      return;
    },
    // 下一页
    uanext() {
      this.pageIndex++;
      return;
    },
    // 点击选页
    btn_current(e) {
      this.pageIndex = e;
      return;
    },

    // 上架of下架
    btnIsshelves(index, id, is) {
      if (is) {
        unshelve(id).then((e) => this.$message("商品下架"));
        this.List[index].on_sale = 0;
      } else {
        shelves(id).then((e) =>
          this.$message({ message: "商品上架成功", type: "success" })
        );
        this.List[index].on_sale = 1;
      }
    },

    pickStore(e) {
      this.storeId = e;
    },
  },
};
</script>

<style lang="scss" scoped>
.btn_query {
  width: 94px;
  height: 32px;
  background: #e5e5e5;
  border: 0;
}
.ipt130 {
  width: 130px;
  margin-right: 20px;
}
.select80 {
  width: 80px;
}
.select94 {
  width: 94px;
}
.sales_top {
  display: flex;
  align-items: center;
  margin-top: 24px;
  padding: 0 28px;
  > div {
    display: flex;
    align-items: center;
    &:nth-child(2) {
      font-size: 16px;
      color: #333;
      margin-right: 30px;
      > span {
        margin-right: 10px;
      }
    }
    &:nth-child(3) {
      font-size: 16px;
      color: #333;
      margin-right: 30px;
      > span {
        margin-right: 10px;
      }
    }
  }
}
.sales_menu {
  margin-top: 31px;
  > button {
    width: 110px;
    height: 32px;
    background: #f19149;
    color: #fff;
    font-size: 16px;
    border: 0;
    border-radius: 3px;
    margin-right: 13px;

    //
    position: relative;
    //
    &:active:after {
      opacity: 0.3;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      transition: 0s;
    }
    &:after {
      content: "";
      display: block;
      position: absolute;
      top: -10px;
      left: -10px;
      right: -10px;
      bottom: -10px;
      pointer-events: none;
      background-color: #888;
      background-repeat: no-repeat;
      background-position: 50%;
      opacity: 0;
      transition: all 0.3s;
    }
    &:focus {
      outline: none;
    }
    &:nth-child(1) {
      margin-left: 15px;
    }
  }
}
.tbody_top {
  background: #e5e5e5;
  height: 50px;
  width: 912px;
}
.sales_conten {
  padding-left: 25px;
  margin-top: 25px;
}
td {
  text-align: center;
}
.tr_content {
}
.tds{
  padding: 15px 0;
}
.underline {
  height: 2px;
  width: 100%;
  border-bottom: 2px dashed #bfbfbf;
}
input[type="checkbox"] {
  width: 15px;
  height: 15px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  line-height: 18px;
  margin-right: 10px;
  position: relative;
}
.cbox_left {
  text-align: left;
  padding-left: 15px;
}
.laypage {
  margin-top: 60px;
  display: flex;
  justify-content: center;
}
.bor3 {
  border-radius: 3px;
}
.modify_popup {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  > div {
    display: flex;
    align-items: center;
    margin: 10px;
    > span {
      margin-right: 20px;
    }
  }
}
.text50 {
  width: 200px;
}
</style>